<html>

<head>
    <script src="vue.js"></script>
</head>

<div id="app">
    {{message}}
</div>

<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>


<div id="app-3">
        <p v-if="seen">现在你看到我了</p>
</div>


<div id="app-4">
    <ol>
        <li v-for="item in titles">
            {{item.text}}
        </li>
    </ol>
</div>


<div id="app-5">
    <p>{{message}}</p>
    <button @click="click_handler">逆转消息</button>
</div>

<div id="app-6">
    <ol>
        <todo-item v-for="item in dataList" v-bind:index_key="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>

<div id="app-8">
    <ol>
        <array-item v-for="item in dataList" v-bind:item="item" v-bind::key="item.id"></array-item>
    </ol>
</div>

<a id="app-9" href="#" v-on:click="clickHandler2">点击事件</a>

<div id="app-10" :style="styleObject">sdfsdfsdfsdfsdf</div>

<div id="dev">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>NO</h1>
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
    <template v-else="ok">
        <h1>hahh</h1>
        <p>sdf 1</p>
        <p>dfd 2</p>
    </template>

    <h1 v-show="ok">Hello!</h1>

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue!'
        }
    })

    var app2=new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于 ' + new Date().toLocaleString()
        }
    })

    var app3=new Vue({
        el:'#app-3',
        data:{
            seen:true
        }
    })

    var app4=new Vue({
        el:'#app-4',
        data:{
            titles:[
                {text:'Spring'},{text:'Java'},{text:'MYSQL'}
            ]
        }
    })

    var app5=new Vue({
        el:'#app-5',
        data:{
            message:'hello vue.js'
        },
        //绑定方法
        methods:{
            click_handler:function(){
                this.message=this.message.split('').reverse().join('')
            }
        }

    })


    //定义组建  可以使用循环的组建
    Vue.component('todo-item',{
        props:['index_key'],
        template:'<li>{{index_key.id}} --> {{index_key.value}}</li>'
    })

    var app6=new Vue({
        el:'#app-6',
        data:{
            dataList:[
                {id:1,value:'蔬菜'}, {id:2,value:'水果'}, {id:3,value:'牛奶'} ,{id:4,value:'果汁'}
            ]
        }
    })



    Vue.component('array-item', {
        props: ['item'],
        template: '<li>{{item.value}}</li>'
    })
    Vue.component('alert-message',{
       template:'xxx'
    })
    var app8 = new Vue({
        el: '#app-8',
        data: {
            dataList: [{
                id: 0,
                value: '蔬菜'
            }, {
                id: 1,
                value: '水果'
            }, {
                id: 2,
                value: '牛奶'
            }, {
                id: 3,
                value: '沙拉'
            }]
        },
        //生命期钩子函数  create:在实例被创建后调用
        created: function () {
            console.log('array-item invoke')
        }
    })
    var app9 = new Vue({
        el: '#app-9',
        methods: {
            clickHandler1: function () {
                alert("哈哈哈哈")
            },
            clickHandler2:function(){
                alert("猪猪")
            }
        }
    })


    var app10=new Vue({
        el:'#app-10',
        data:{
            styleObject:{
                color: 'red',
                fontSize: 30
            }
           
        }
       
    })

    var dev=new Vue({
        el:'#dev',
        data:{
            ok:false
        }
    })
</script>

</html>